<template>
    <view class="logistics-details-index-containter">
        <!--物流详情上方-物流详情-->
        <view class="logistics-details-top-containter">
            <view class="logistics-details-top-tips">订单编号：{{ wayBillId }}</view>
            <view class="logistics-details-top-tips">物流公司：{{ deliveryName }}</view>
        </view>
        <!--物流详情列表-->
        <view class="logistics-details-wrap">
            <block v-for="(item, index) in arr" :key="index">
                <view class='logistics-details-item-containter'>
                    <view class="logistics-details-item-left">
                        <image class="logistics-details-item-left-icon"
                            :src="'../../static/img/common/logistics_' + item.icon + '.png'" />
                        <view class="logistics-details-item-left-line"></view>
                    </view>
                    <view class="logistics-details-item-right">
                        <block>
                            <view class="logistics-details-item-right-detail">
                                {{ item.actionMsg }}
                            </view>
                            <view class="logistics-details-item-right-time">{{ item.actionTime }}</view>
                        </block>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
import {
    order
} from '../../services/index.js';
export default {
    data() {
        return {
            arr: [],
            deliveryName: '',
            wayBillId: '',
            type: 'order',
        }
    },
    mounted() {
    },
    onLoad() {
    },
    methods: {
        //加载完成
        onLoad(params) {
            this.getExpressStatus(params);
        },
        async getExpressStatus(data) {
            uni.showLoading();
            let res = {};
            if(data.type == 'order') {
                res = await order.getExpressStatus(data);
            } else {
                res = await order.aftersaleLogisticsQuery(data);
            }
            if (res.code === 200) {
                this.deliveryName = res.data.logisticsCompany;
                this.wayBillId = res.data.lid;
                let iconType = {
                    100000: '0_1',
                    100001: '1_1',
                    100002: '1_0',
                    100003: '1_1',
                    200001: '2_1',
                    300002: '3_1',
                    300003: '5_1',
                    300004: '5_0',
                    400001: '0_0',
                    400002: '0_0',
                }
                let arrTitle = {
                    100000: '已发货',
                    100001: '揽件成功',
                    100002: '揽件失败',
                    100003: '准备揽件',
                    200001: '运输中',
                    300002: '派送中',
                    300003: '已签收',
                    300004: '签收失败',
                    400001: '订单取消',
                    400002: '订单滞留'
                };
                res.data.pathItems.forEach(v => {
                    v.title = arrTitle[v.actionType];
                    v.icon = iconType[v.actionType];
                    v.actionTime = new Date(v.actionTime * 1000).Format("yyyy-MM-dd HH:mm:ss");  
                });
                this.arr = res.data.pathItems;
            }
            uni.hideLoading();
        },
    }
}
</script>

<style scoped>
.logistics-details-index-containter {
    position: fixed;
    width: 100%;
    height: 100%;
}

.logistics-details-wrap {
    padding-top: 130rpx;
    height: calc(100% - 130rpx);
    overflow-x: hidden;
    overflow-y: scroll;
}

/*物流详情上方-物流详情*/
logistics-details-top {
    width: 100%;
}

.logistics-details-top-containter {
    position: fixed;
    top: 0;
    width: 100%;
    height: 118rpx;
    background: #fff;
    font-size: 26rpx;
    color: rgba(51, 51, 51, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    z-index: 999;
}

.logistics-details-top-tips {
    line-height: 52rpx;
    margin-left: 20rpx;
}

.logistics-details-item-containter {
    position: relative;
    display: flex;
    background: #fff;
}

.logistics-details-item-left {
    width: 80rpx;
}

.logistics-details-item-left-icon {
    width: 40rpx;
    height: 40rpx;
    margin: 20rpx 20rpx 0 20rpx;
}

.logistics-details-item-left-line {
    margin: 0 39rpx;
    margin-top: -69rpx;
    width: 2rpx;
    height: 100%;
    background: #DADADA;
}

.logistics-details-item-right {
    display: inline-block;
    width: calc(100% - 80rpx);
    padding: 20rpx 0;
}

.logistics-details-item-right-title {
    font-size: 28rpx;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 56rpx;
}

.logistics-details-item-right-detail {
    font-size: 24rpx;
    color: rgba(51, 51, 51, 1);
    line-height: 40rpx;
    width: 90%;
}

.logistics-details-item-right-time {
    font-size: 24rpx;
    color: rgba(51, 51, 51, 1);
    line-height: 48rpx;
    font-weight: bold;
}

.logistics-details-item-right-detail-red {
    color: red;
}
</style>